<template>
  <div class="box">
    <div class="bg"></div>
    <van-nav-bar
      id="van-bar"
      :title="title"
      :border="border"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <img
          :style="{ width: widthPx, height: heightPx }"
          src="@/assets/iconPerfectInformation/nav_back@2x.png"
        />
      </template>
      <template #right>
        <div class="headright">
          <img src="@/assets/myicon/camera-white.png" alt="" srcset="" /><span
            >发布</span
          >
        </div>
      </template>
    </van-nav-bar>

    <div
    
      class="glance"
      :style="
        'top:' +
        topheight +
        'px;height:calc(100vh - ' +
        topheight +
        'px);width:100%;overflow:auto;'
      "
    >
      <div class="glancelist">
        <div class="plate-review">
          <!-- <div v-if="dataInfo.reply_show_content == 1" class="line"></div> -->
          <span v-if="replyList.length > 0">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="initReplyList"
            >
              <div
                class="plate-review-box"
                style="position: relative;"
                v-for="itemReply in replyList"
                :key="itemReply.id"
              >
                <div class="plate-review-box-del" @click="sc(itemReply.id)">删除</div>
                <div class="plate-review-box-headImg">
                  <img :src="itemReply.user.avatar" @click="goto(itemReply)" alt="" />
                </div>
                <div class="plate-review-box-info">
                  <div class="plate-review-box-info-name">
                    {{ itemReply.user.nickname }}
                  </div>
                  
                  
               
                  <div class="plate-review-box-info-review">
                    <div class="plate-review-box-info-review-label">点评</div>
                    <div class="plate-review-box-info-review-tags">
                      <p
                        v-for="itemAaaess in itemReply.picture_label"
                        :key="itemAaaess"
                      >
                        {{ itemAaaess }}
                      </p>
                    </div>
                  </div>
                  <div class="plate-review-box-info-note">
                    {{ itemReply.comment }}
                  </div>
                  <div class="plate-review-box-info-time">
                    {{ itemReply.add_time }}
                  </div>
                </div>
              </div>
            </van-list>
          </span>
          <span v-else>
            <van-empty description="暂无点评" />
          </span>
        </div>
        <!-- <div class="list" v-for="(item, index) in list" :key="index">
            <div class="del" @click="cz(item.id)">删除</div>
            <div class="title">{{item.content}}</div>
            <div class="time">{{item.timetitle}} | {{item.city_name}}</div>
            <div class="img">
                <img class="more"  v-for="(item1, index1) in item.images" :key="index1" v-if="item.images.length>1" :src="item1" alt="" srcset="">
                <img :src="item.images[0]" class="one" v-else alt="" srcset="">
            </div>
        </div> -->
        <!-- <p style="text-align: center;margin: 24px 0;color: #AAAAAA;font-size: 10px;"></p> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getimpressList, delimpressList } from "@/api/index";
import { parseTime } from "@/utils/fun";
import { Toast } from 'vant'

export default {
  data() {
    return {
      border: "",
      widthPx: "28px",
      heightPx: "28px",
      topheight: 0,
      isActive: 0,
      isshow: true,
      replyList: [],
      title: "我的点评",
      isActive: 0,
      loading: true,
      finished: false,
      searchParameter: {
        //  * 城市编码  为空为首页检索接口
        page: 1,
        limit: 10,
      },
      list: [],
    };
  },
  mounted() {
    this.topheight = document.getElementById("van-bar").offsetHeight;
    this.initReplyList();
  },

  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {
      this.$router.push("/dynamic");
    },
    goto(e){
      if (e.user.is_merchant==1) {
      this.$router.push({
        path: "/detail",
        query:{id:e.user.uid}
      })  
      }else{
        this.$router.push({
        path: "/userDetail",
        query:{id:e.user.uid}
      })  
      }
    },
    sc(id) {
      delimpressList(id).then((res) => {
        // this.list=res.data.list
         Toast('删除成功')

        this.initReplyList()
        console.log(res);
      });
    },
    initReplyList() {
      getimpressList(this.searchParameter)
        .then((res) => {
          // console.log(res)
          res.data.list.forEach((element) => {
            element.add_time = parseTime(element.add_time);
          });

          // this.replyList = this.replyList.concat(...res.data.list)

          if (this.searchParameter.page == 1) {
            this.replyList = res.data.list;
            console.log(this.replyList);

            if (res.data.count == this.replyParams.limit) {
              this.searchParameter.page++;
            }
          } else {
            this.replyList = this.replyList.concat(...res.data.list);
            if (res.data.count == this.replyParams.limit) {
              this.searchParameter.page++;
            }
          }

          if (res.data.count <= this.replyList.length) {
            this.finished = true;
          }

          this.$forceUpdate();
          this.loading = false;
        })
        .catch((res) => {
          this.finished = true;
          this.loading = false;
        });

      this.finished = true;
    },

    // getData(){

    //   const queryString = Object.keys(this.searchParameter)
    //     .map((key) => {
    //       if (this.searchParameter[key] && !!this.searchParameter[key]) {
    //         return `${encodeURIComponent(key)}=${encodeURIComponent(
    //           this.searchParameter[key]
    //         )}`
    //       }
    //     })
    //     .filter((res) => {
    //       return res
    //     })
    //     .join('&')
    //     getDongtai('0').then((res) => {
    //     // this.list=res.data.list
    //   const time = Math.round(new Date().getTime()/1000).toString();
    //     let list = []
    //      let time1=0
    //     res.data.list.forEach((el) => {
    //       time1=time-el.add_time
    //       if(time1<3600){
    //         el.timetitle=Math.round(time1/60)+'分钟前'
    //         // console.log(el.timetitle);
    //       }else if(time1<86400){
    //         el.timetitle=Math.round(time1/3600)+'小时前'
    //       }else {
    //         el.timetitle=Math.round(time1/86400)+'天前'
    //       }

    //     })
    //     this.list = list.concat(...res.data.list)
    //     console.log(this.list);
    //       // 加载状态结束
    //     this.loading = false
    //     this.finished = true
    //   })
    // },
  },
};
</script>

<style lang="scss" scoped>
.active {
  position: relative;
  margin: 8px auto 0 auto;
  width: 194px;
  display: flex;
  height: 36px;
  background: #e8edfc;
  border-radius: 8px;
}
.active div {
  flex: 1;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #767676;
}

.isActive {
  width: 96px;
  height: 32px;
  background: #ffffff;
  border-radius: 8px;
  line-height: 32px !important;
  margin: 2px;
  color: #1a1a1a !important;
}
.setting {
  padding: 14px 16px;
  box-sizing: border-box;
  background: #e8edfc;
  width: 343px;
  height: 66px;
  margin: 0 auto;
  /* background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%); */
  border-radius: 8px;
  border: 1px solid rgba(82, 117, 241, 0.3);
}
.glance {
  position: absolute;
}
.bg {
  width: 375px;
  height: 88px;
  position: absolute;
  top: 0;
  background: linear-gradient(180deg, #cde1fd 0%, rgba(255, 255, 255, 0) 100%);
}
.glancelist {
    margin: 0 auto;
}

.time {
  margin-top: 10px;
  font-size: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #767676;
}
.img {
  display: flex;
  flex-wrap: wrap;
  margin-top: 7px;
}
.img img {
  border-radius: 5px;
}
.list {
  padding-top: 16px;
  position: relative;
}
.headright {
  width: 66px;
  height: 30px;
  background: linear-gradient(180deg, #3764ec 0%, #6b85f7 100%);
  border-radius: 8px;
}
.headright img {
  margin: 6px 2px;
}
.headright span {
  line-height: 32px;
  color: #ffffff;
  vertical-align: top;
}
.del {
  position: absolute;
  right: 10px;
  top: 16px;
  width: 52px;
  text-align: center;
  line-height: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid #767676;
  font-size: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #767676;
}
.more {
  width: 105px;
  height: 105px;
  margin: 0 6px 6px 0;
}
.one {
  width: 233px;
  height: 321px;
  border-radius: 4px;
}
.title {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
}
.van-cell {
  background-color: transparent;
}
.van-cell::after {
  border-color: #d8d8d8;
}
.van-cell__value {
  color: #1a1a1a;
  font-weight: 500;
}
.btn {
  float: right;
  margin: 6px 0;
  text-align: center;
  width: 84px;
  height: 28px;
  border-radius: 8px;
  line-height: 28px;
  border: 1px solid #767676;
  font-size: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #767676;
}
.plate {
  margin-bottom: 100px;

  &-dynamic {
    margin-top: 20px;
    padding: 0 16px;
    margin-bottom: 20px;

    &-name {
      font-size: 16px;
      font-weight: 400;
      color: #1a1a1a;
    }

    &-time {
      font-size: 12px;
      font-weight: 400;
      color: #767676;
      line-height: 25px;
    }

    &-picture {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;

      img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 4px;
      }
    }

    &-picturess {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      row-gap: 6px;

      img {
        width: 233px;
        height: 321px;
        border-radius: 4px;
        object-fit: cover;
      }
    }
  }

  &-review {
    margin-top: 20px;

    &-box {
      padding: 20px 15px;
      display: flex;
      position: relative;
    &-del{
       position: absolute;
  right: 10px;
  top: 16px;
  width: 52px;
  text-align: center;
  line-height: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid #767676;
  font-size: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #767676;
    }
      &-headImg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: pink;
        margin-right: 7px;

        img {
          border-radius: 50%;
          width: 40px;
          height: 40px;
        }
      }

      &-info {
        &-name {
          font-size: 14px;
          font-weight: 500;
          color: #1a1a1a;
          line-height: 24x;
        }

        &-start {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 500;
          line-height: 20px;
          color: #6b85f7;
        }

        &-msg {
          font-size: 12px;
          font-weight: 500;
          line-height: 20px;
          color: #6b85f7;
        }

        &-serve,
        &-review {
          display: flex;
          align-items: baseline;
          font-size: 12px;
          font-weight: 400;
          color: #767676;
          line-height: 12px;
          margin-bottom: 10px;

          &-label {
            flex: 1.5;
            margin-top: 15px;
          }

          &-tags {
            flex: 9;
            display: flex;
            flex-wrap: wrap;

            p {
              margin-right: 8px;
              padding: 2px 7px;
              border-radius: 8px;
            }
          }
        }

        &-serve {
          &-tags {
            p {
              color: #8a38f5;
              background: #e7d4ff;
              margin-bottom: 5px;
            }
          }
        }

        &-review {
          &-tags {
            p {
              background: #ffd7ed;
              color: #eb2f96;
              margin-bottom: 5px;
            }
          }
        }

        &-note {
          font-size: 14px;
          font-weight: 400;
          color: #1a1a1a;
          line-height: 20px;
        }

        &-time {
          color: #aaaaaa;
          font-size: 10px;
          padding-top: 10px;
        }
      }
    }
  }

  &-contact {
    margin: 16px auto;
    width: 343px;
    height: 83px;
    background: linear-gradient(180deg, #3764ec90 0%, #6b85f790 100%);
    border-radius: 8px;
    border: 1px solid rgba(82, 117, 241, 0.6);
    display: flex;
    justify-content: space-evenly;

    color: #ffffff;

    &-wechat {
      flex: 1;
      display: flex;
      align-items: center;

      > div {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        p:nth-of-type(1) {
          font-size: 16px;
        }

        p:nth-of-type(2) {
          font-size: 12px;
        }
      }

      img {
        width: 32px;
        height: 32px;
        padding: 7px;
      }
    }

    &-line {
      width: 1px;
      height: 100%;
      margin: 0 18px;
      background: rgba(54, 98, 236, 0.5);
    }

    &-phone {
      flex: 1;
      display: flex;
      align-items: center;

      > div {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        p:nth-of-type(1) {
          font-size: 16px;
        }

        p:nth-of-type(2) {
          font-size: 12px;
        }
      }

      img {
        width: 32px;
        height: 32px;
        padding: 7px;
      }
    }
  }
}
</style>
